<template>
  <div class="common-page home-page">
    <choose-hospital>
      <div class="change-dept">
        <span>{{ currentDept.hospitalName }} {{ currentDept.departmentName }}<span class="change-dept-icon" /></span>
      </div>
    </choose-hospital>

    <div class="welcome-msg">
      <em>HI</em>-我是您的宣教助手<br>
      很高兴为您提供以下贴心服务
    </div>
    <template
      v-for="item in blockModel.status"
      :key="item.id"
    >
      <div
        v-if="item.isShow"
        class="module-item flex flex-center"
        :class="{require: item.isRequire}"
        @click="pushRouter(item.url)"
      >
        <div class="flex1 flex flex-column">
          <div class="item-title">
            {{ item.title }}
          </div>
          <div class="item-subtitle van-multi-ellipsis--l2">
            {{ item.desc }}
          </div>
        </div>
        <div class="skip-icon iconfont iconshouye-jinru" />

        <div class="num" v-if="item.id === 5 && $store.state.global.msgNum">
          {{ $store.state.global.msgNum || 0 }}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { useCurrentDeptInfo } from '@/hooks/store';
import { useService } from '@/utils/services';
import ChooseHospital from './components/ChooseHospital';

const BLOCK_DATA = [
  {
    id: 1,
    title: '宣教中心',
    desc: '我们为您提供康复和健康知识，供您学习了解',
    url: '/education',
    isShow: true,
    isRequire: true
  },
  {
    id: 2,
    title: '康复社群（推荐）',
    desc: 'guideContext',
    isShow: false,
    url: '/group',
    field: 'serviceStatus'
  },
  {
    id: 3,
    title: '贴心服务（推荐）',
    desc: '',
    isShow: false,
    url: ''
  },
  {
    id: 4,
    title: '满意度调查问卷',
    desc: '为了能够更好的提供服务，请认真填写此表！',
    isShow: false,
    url: '/follow',
    field: 'satisfactionSurveyStatus'
  },
  {
    id: 5,
    title: '患者咨询',
    desc: '如有问题，可向科室留言咨询，我们将为您答疑解惑！',
    isShow: false,
    url: '/consult',
    field: 'patientConsultationStatus'
  },
  {
    id: 6,
    title: '患者出入量统计',
    desc: '填写患者水分摄入及排出数据，关注患者健康状况',
    isShow: false,
    url: '/quantity',
    field: 'inOutQuantifyStatus'
  },
  {
    id: 7,
    title: '出院后康复指导预约',
    desc: '填写您关注的疾病及康复需求，我们为您对接相应的康复课程',
    isShow: false,
    url: '/drugs',
    field: 'recoveryOrderState'
  }
];

export default {
  components: {
    ChooseHospital
  },
  setup() {
    const router = useRouter();
    const actions = useService();
    const store = useStore();

    const blockModel = reactive({
      status: BLOCK_DATA
    });

    actions.hos.getHomeSetting().then((res) => {
      let keys = Object.keys(res);

      blockModel.status = BLOCK_DATA.map((item) => {
        if (keys.includes(item.field)) {
          item.isShow = res[item.field];
        }
        if (keys.includes(item.desc)) {
          item.desc = res[item.desc];
        }
        if (item.id == 4) {
          //满意度调查问卷 携带参数单独处理
          item.url = `/follow?fromType=0&questionId=${res.satisfactionSurveyQuestionId}`;
        }
        return item;
      });
    });

    const pushRouter = (url) => {
      router.push(url);
    };

    const currentDept = useCurrentDeptInfo();

    store.dispatch('getSurplus');

    return {
      pushRouter,
      currentDept,
      blockModel
    };
  }
};
</script>

<style lang="scss" scoped>
.home-page {
  min-height: 100vh;
  padding: 20px 32px 0;

  .change-dept {
    color: #fff;
    font-size: 32px;
    margin-bottom: 32px;
    span {
      display: inline-block;
      vertical-align: baseline;
    }
    &-icon {
      margin-left: 10px;
      border: 6px solid #fff;
      border-left-color: transparent;
      border-top-color: transparent;
    }
  }

  .welcome-msg {
    font-size: 44px;
    color: #ffffff;
    line-height: 60px;
    text-shadow: 0px 2px 4px #00b8af;
    margin-bottom: 26px;
    em {
      color: #fff099;
    }
  }

  .module-item {
    // width: 686px;
    min-height: 216px;
    background: #ffffff;
    box-shadow: 0px 4px 24px 0px rgba(12, 174, 166, 1);
    border-radius: 32px;
    padding: 32px;
    position: relative;
    margin-bottom: 32px;

    &.require {
      &:after {
        content: '必进';
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0 32px 0 32px;
        color: #fff;
        background: #ff5f87;
        padding: 8px 20px;
        font-size: 14px;
      }
    }

    .item-title {
      font-size: 36px;
      font-weight: 550;
      color: #373d52;
      margin-bottom: 14px;
    }

    .item-subtitle {
      font-size: 30px;
      font-weight: 400;
      color: #a2a6b8;
      line-height: 42px;
    }

    .skip-icon {
      line-height: 1.2;
      font-size: 56px;
      color: #53e791;
      flex-basis: 56px;
      align-self: flex-end;
    }
  }

  .num {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 32px 0 32px;
    color: #fff;
    background: #ff5f87;
    padding: 8px 20px;
    font-size: 14px;
  }
}
</style>